<template>
  <div class="wrapper">
	  <swiper :options="swiperOption" ref="mySwiperA">
		<swiper-slide v-for='item of swiperList' :key='item.id'><img class='swiper_img' :src="item.imgUrl"></swiper-slide>
		<div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
  </div>
</template>
<script>
export default {
  name: 'travel_homeSwiper',
  props:{
	 
  },
  data(){
	  return {
		  swiperOption:{
			  pagination:'.swiper-pagination',
			  loop:true,//是否循环
				autoplay: 3000,//自动切换的时间间隔
				speed:500//切换的速度
		  },
		  swiperList:[
			  {
				  id:'001',
				  imgUrl:'https://pic5.40017.cn/03/000/31/0c/rBANB1zlAcKAJMMtAALRm_wVSlk432_520x218_00.jpg'
			  },
			  {
				  id:'002',
				  imgUrl:'https://pic5.40017.cn/03/000/28/73/rB5oQFxG7M2AOgxwAADChAKgVcA559_520x218_00.jpg'
			  }
		  ]
	  }
  },
	computed: {
        swiper() {
          return this.$refs.mySwiperA.swiper
        }
    },
  mounted() {
        //console.log("每次切换都会触发我");
        //this.swiper.slideTo(1, 1000, false)
     }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.swiper_img
	width:100%
</style>
